import {
  Row,
  Col,
  Form,
  Input,
  Button,
  Modal,
  Select,
  DatePicker,
} from 'antd';


import React from 'react';
import { connect } from 'dva';

// const R = require('ramda');
const FormItem = Form.Item;

const EditMarketInfo = Form.create()(
  class CreateForm extends React.Component {
    constructor(props: any) {
      super(props);
      this.state = {
        open: false,
      };
    }

    handleConfirm = (props: any) => {
    };

    handleOpen = () => {
      this.setState({ open: true });
    };

    handleCancel = () => {
      // @ts-ignore
      this.props.form.resetFields();
      this.setState({ open: false });
    };

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { sm: { span: 8 } }, wrapperCol: { sm: { span: 14 } } };
      const formItemLayout2 = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };

      const footer = [];
      footer.push(
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="cancel" size="large" onClick={this.handleCancel.bind(this)}>
          取消
        </Button>,
      );


      footer.push(
        // @ts-ignore
        // eslint-disable-next-line react/jsx-no-bind
        <Button key="submit" size="large" loading={this.props.loading} onClick={this.handleConfirm.bind(this)}>
          确认
        </Button>,
      );

      return (
        <Modal
          destroyOnClose
          title="营销线索"
          // @ts-ignore
          visible={this.state.open}
          width={800}
          footer={footer}
          onCancel={this.handleCancel}
        >
          <Form>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="实际营销时间" hasFeedback>
                  {getFieldDecorator('marketTime', {
                    rules: [{ required: true, message: '请输入实际营销时间！' }],
                    initialValue: '',
                  })(<DatePicker style={{ width: '100%' }} />)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem {...formItemLayout} label="营销阶段" hasFeedback>
                  {getFieldDecorator('marketStage', {
                    rules: [{ required: true, message: '请选择一种营销阶段！' }],
                    initialValue: '',
                  })(
                    <Select style={{ width: '100%' }} allowClear >
                      <Select.Option value="1">初次交流</Select.Option>
                      <Select.Option value="2">普通交流</Select.Option>
                      <Select.Option value="3">重要交流</Select.Option>
                      <Select.Option value="4">决定性交流</Select.Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <FormItem {...formItemLayout2} label="本次交流内容" hasFeedback>
                  {getFieldDecorator('exchangeContent', {
                    rules: [{ required: true, message: '请输入本次交流内容' }],
                    initialValue: '',
                  })(
                    <Input.TextArea autosize={{ minRows: 3 }} maxLength={2000} />,
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem {...formItemLayout} label="成果定性" hasFeedback>
                  {getFieldDecorator('result', {
                    rules: [{ required: true, message: '请选择成果定性！' }],
                    initialValue: '',
                  })(
                    <Select style={{ width: '100%' }} allowClear >
                      <Select.Option value="1">低于预期</Select.Option>
                      <Select.Option value="2">符合预期</Select.Option>
                      <Select.Option value="3">超过预期</Select.Option>
                    </Select>,
                  )}
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
      );
    }
  },
);

function mapStateToProps(state: any) {
  return {
    loading: state.loading.models.creditFinance,
  };
}

export default connect(mapStateToProps)(EditMarketInfo);
